// Font stacks.
$serif:   "Crimson", Georgia, serif;
$mono:    "Source Code Pro", Menlo, Consolas, Monaco, monospace;
$nav:     "Source Sans Pro", sans-serif;

// The main intense primary accent color.
$primary:       hsl(200, 80%, 40%);
$primary-dark:  hsl(200, 100%, 20%);
$primary-light: hsl(200, 70%, 60%);

// A ramp of washed out blues from dark to light.
$dark:    hsl(215, 20%, 20%);
$gray-1:  hsl(212, 23%, 30%);
$gray-2:  hsl(209, 26%, 40%);
$gray-3:  hsl(206, 30%, 50%);
$gray-4:  hsl(203, 30%, 60%);
$light:   hsl(195, 30%, 90%);
$lighter: hsl(195, 35%, 95%);

// An opposing warm light color (code background).
$warm-dark:  hsl(40, 0%, 35%);
$warm-light: hsl(40, 30%, 97%);
$warm-1:     mix($warm-light, $warm-dark, 15%);
$warm-2:     mix($warm-light, $warm-dark, 40%);
$warm-3:     mix($warm-light, $warm-dark, 60%);
$warm-4:     mix($warm-light, $warm-dark, 80%);
$warm-5:     hsl(40, 20%, 95%);

// The full-size design is 28 units wide, in three columns:
// [][][][][][][][][][][][][][][][][][][][][][][][][][][][]
//   (   5    )    (          12          )  (    6     )
// They are asymmetric because the left column has a dark background, which
// requires a double margin.
$col: 48px;

@font-face {
  font-family: 'Crimson';
  src: url('font/crimson-roman.woff') format('woff');
}

@font-face {
  font-family: 'Crimson';
  src: url('font/crimson-italic.woff') format('woff');
  font-style: italic;
}

@font-face {
  font-family: 'Crimson';
  src: url('font/crimson-semibold.woff') format('woff');
  font-weight: 600;
}

@font-face {
  font-family: 'Crimson';
  src: url('font/crimson-semibolditalic.woff') format('woff');
  font-style: italic;
  font-weight: 600;
}

@font-face {
  font-family: 'Crimson';
  src: url('font/crimson-bold.woff') format('woff');
  font-weight: bold;
}

@font-face {
  font-family: 'Crimson';
  src: url('font/crimson-bolditalic.woff') format('woff');
  font-style: italic;
  font-weight: bold;
}

// Reset stuff.

body, h1, h2, h3, h4, p, blockquote, code, ul, ol, dl, dd, img {
  margin: 0;
}

img {
  outline: none;
}

img.arrow {
  width: auto;
  height: 11px;
}

img.dot {
  width: auto;
  height: 18px;
  vertical-align: text-bottom;
}

// Basic styles.

body {
  color: #222;
  font: normal 16px/24px $serif;
}
